<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
//XMLHttpRequest 객체를 통해 Ajax 비동기 요청 - cmd = getHello / 요청방식 : GET 

var xhr;
function getHello(){
	var name = document.getElementById("name").value;
	
	//1. XMLHttpRequest 객체 생성
	if(window.ActiveXObject) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else {
		xhr = new XMLHttpRequest();
		
	}
	
	
	//2. xhr객체에 값 설정
	/*
	URL Encoding 처리 - GET 방식일 경우 필요.
	-encodingURI(문자열) : URL 전체를 encoding 할 때 사용
	-encodeURIComponent(문자열) : 값으로 사용할 개별 문자열을 encoding할 때 사용
	*/
	alert(name);
	name = encodeURIComponent(name);
	alert(name);
	var url = "/javascript/ajax/AjaxController?cmd=getHello&name="+name;
	
	//2-1. open() : 요청방식-GET , URL - /javascript/ajax/AjaxController, 비동기
	xhr.open("GET",url, true);
	//2-2. xhr에 callback 함수 등록: 함수명 - callback
	xhr.onreadystatechange = callback;
	//2-3. 전송
	xhr.send(null);
}

function callback(){
	//서버단에서 응답이 왔을 때 
	if(xhr.readyState == 4) {
	//정상 응답이 왔을 때
		if(xhr.status == 200) {
		
	//응답결과를 버튼 아래에 나오도록 처리.
			var txt = xhr.responseText;
		//	alert(txt);
			document.getElementById("name_layer").innerHTML = txt;
		}else {
			alert(xhr.staus + "-" + xhr.statusText);
		}
 	}	
}
</script>
</head>
<body>
이름 : <input type="text" id = "name" ><!-- 이름 : 영문으로  -->
<input type = "button" value="인사말 요청 - GET요청" onclick="getHello();">
<div id="name_layer"></div>
</body>
</html>